<template>
    <div>
        <div class="nav-bar clearfix">
				<div class="col-xs-1"><router-link to="/home" tag="a"><img src="images/icon-home.png"></router-link></div>
				<div class="col-xs-9">
					<form class="navbar-form navbar-left" role="search">
					  <div class="form-group clearfix">
						  <a class="city-text floatL">全国</a>
					    <input type="text" class="form-control floatL" placeholder="产品经理">
						<a href="#" class="close floatR" data-dismiss="alert">&times;</a>
					  </div>
					  <button type="submit" class="btn btn-default">搜索</button>
					</form>
				</div>
				<div class="col-xs-2 sendmsg"><span><img src="images/chat-active.png"></span><br>消息</div>
			</div>
			<!--nav-bar-->
			<div class="filter-bar">
				<ul class="clearfix filter-list navbar-nav">
					<li class="floatL" v-for="item in filters" :key="item.id">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{item.name}} 
			            <b class="caret"></b>
						</a>
						<ul class="dropdown-menu f-list">
						    <li v-for="option in item.options" :key="option.id"><a href="#">{{option.text}}</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!--filterbar-->
            <ul class="list">
					<router-link :to="'/jobInfo/'+item.id" class="clearfix" v-for="item in jobs" :key="item.id" tag="li">
						<span class="col-xs-3"><img :src="item.logo"></span>
						<div class="col-xs-5">
							<span>{{item.job}}</span>
							<p>{{item.company}}</p>
							<p><span>{{item.city}}</span><span>{{item.exp}}</span><span>{{item.edc}}</span></p>
						</div>
						<p class="col-xs-4">{{item.payment}}</p>
					</router-link>
				</ul>
			<!--list-->
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag1:false,
            filters:[],
            catgs:[],
            jobs:[],
            id:this.$route.params.id,
            name:this.$route.params.name
        }
    },
    created() {
        this.getFilters(),
        this.getCatgs(),
        this.getJobs()
    },
    methods: {
        show1(){
			this.flag1=!this.flag1;
            },
        getFilters(){
            this.$http.get('http://127.0.0.1:3000/api/filters.json').then(result => {
                this.filters=result.body
            })
        },
        getCatgs(){
            this.$http.get('http://127.0.0.1:3000/api/index.json').then(result=>{
                if(result.body.status===0)
                {this.catgs=result.body.message}
            })
        },
        getJobs(){
            this.$http.get('http://127.0.0.1:3000/api/jobsList/'+this.name+'.json').then(result => {
                this.jobs=result.body
            })
        } 
    }
}
</script>

<style lang="scss" scoped>
/*navbar*/
.nav-bar { padding: 10px 0;}
.nav-bar .col-xs-1 { padding-right: 0; padding-top: 8px;}
.nav-bar .col-xs-1 a img{width: 18px; height: 18px;}
.nav-bar .col-xs-9 { padding: 0 0 0 15px;}
.nav-bar .col-xs-9 .navbar-form {padding:10px 0 10px 15px; width: 100%;}
.nav-bar .col-xs-9 .navbar-form .form-group {width: 85%; background: #f5f8f9; display: inline-block; vertical-align: middle; border-radius: 15px;}
.nav-bar .col-xs-9 .navbar-form .form-group .city-text {display: block; color: #333; border-right: 1px solid #ccc; padding: 0 10px; line-height: 15px; margin-top: 10px; font-size: 12px;}
.nav-bar .col-xs-9 .navbar-form .form-group .form-control {border: none; background: none; box-shadow:none;width: 60%; font-size: 12px;}
.nav-bar .col-xs-9 .navbar-form .btn { display: inline-block; vertical-align: middle; border: none; color: #5dd5ca; font-size: 14px; padding: 0 0 0 5px;}
.nav-bar .col-xs-9 .navbar-form .close {margin-top: 6px; padding-right:10px;}
.sendmsg span img {width: 18px; height: 18px;}
.sendmsg {font-size: 10px; text-align: center; color: #5dd5ca;}
/*filter-bar*/
.filter-bar .filter-list {border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; position: relative; margin: 0; width: 100%;}
.filter-bar .filter-list li {width: 20%; text-align: center; color: #aaa; font-size: 12px;}
.filter-bar .filter-list li a {display: block;}
.filter-bar .filter-list .f-list {position: absolute; width: 110vw;background: rgba(0,0,0,0.3);height: 100vh; padding: 0;}
.filter-bar .filter-list .f-list li { font-size: 14px; background: #fff; width: 100%; text-align: left;padding: 5px 0;}
.filter-bar .filter-list .f-list li a {color: #7e8793; padding-left:19px;}
/*list*/
.list li {padding: 15px 0; border-bottom:1px solid #eee;}
.list .col-xs-5 {padding: 0;}
.list .col-xs-5 a {color: #555; font-size: 14px; line-height: 26px; display: block; overflow: hidden; white-space: nowrap;}
.list .col-xs-5 p {font-size: 12px; margin-top: 2px;}
.list .col-xs-5 p span {margin-right: 10px; color: #aaa;}
.list .col-xs-4 {padding-left: 0; color: #fc6c38; font-size: 19px; text-align: right;}
.list .col-xs-3 img {width: 59px; height: 59px;}
</style>